<template>
	<div>
		<div>
			<div style="display: inline-block">
				<el-button type="primary" @click="toAdd">新增</el-button>
			</div>
			<el-form inline style="display: inline-block; float: right">
				<el-form-item label="启用状态">
					<el-select v-model="openStatus" placeholder="请选择">
						<el-option label="全部" value=0>
						</el-option>
						<el-option v-for="(item, index) in openList" :key='index' :label="item.name" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="系统名">
					<el-input type="text" placeholder="请输入系统名" v-model="name" maxlength="11"></el-input>
				</el-form-item>
				<el-form-item label="终端类型">
					<el-select v-model="terminalType" placeholder="请选择">
						<el-option label="全部" value="">
						</el-option>
						<el-option v-for="(item, index) in typeList" :key='index' :label="item.name" :value="item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="searchSystm">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<cvue-table :option="tableOption" :data="tableData" ref="tbl1" :isShowAdd="false" :page="page" :tablePage="page.currentPage" :pageSize="page.pageSize" :loading="tableLoading" @current-change="handleCurrentChange" @size-change="handleSizeChange" :isShowPage="true">
			<template slot-scope="scope" slot="icon">
				<img :src="scope.row.icon" alt="" class="img">
			</template>
			<template slot-scope="scope" slot="isActive">
				<span v-if="scope.row.isActive">
					是
				</span>
				<span v-else>
					否
				</span>
			</template>
			<!-- 操作按钮 -->
			<el-table-column fixed="right" slot="actionMenu" label="操作" align="center" header-align="center" width="200">
				<template slot-scope="scope">
					<div class="operation">
						<el-button type="primary" @click="handEdit(scope.row)">编辑</el-button>
						<el-button type="danger" @click="handDel(scope.row)">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</cvue-table>
		<!-- 创建 -->
		<add-list @closeDialog="closeDialog('add')" @confirmDialog="confirmDialog('add')" @handleClose="closeDialog('add')" :dialogVisible="dialogVisibleAdd"></add-list>
		<edit-list @closeDialog="closeDialog('edit')" @confirmDialog="confirmDialog('edit')" @handleClose="closeDialog('edit')" :dialogVisible="dialogVisibleEdit"></edit-list>
	</div>
</template>
<script>
/* eslint-disable */
import cvueTable from '@/components/cvue-table'
import { baseUrl } from '@/config/config'
import addList from './addList'
import editList from './editList'
export default {
	name: 'schoolList',
	components: {
		cvueTable, addList, editList
	},
	data() {
		return {
			dialogVisibleAdd: false,
			dialogVisibleEdit: false,
			name: '',
			tablePage: 1,
			tableLoading: false,
			page: {
				total: 0, // 总页数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
				pageSizes: [10, 20, 30, 40, 50]
			},
			tableOption: {
				stripe: true,
				width: '100%',
				border: true,
				index: false,
				cloumn: [
					{ prop: 'title', label: '系统名', align: 'center', width: 150 },
					{ prop: 'url', label: '系统URL', align: 'center' },
					{ prop: 'icon', label: '图片', align: 'center', slotStatus: true },
					{ prop: 'mark', label: '标志', align: 'center' },
					{ prop: 'creationTime', label: '创建时间', align: 'center', width: 160 },
					{ prop: 'isActive', label: '启动', align: 'center', slotStatus: true },
					{ prop: 'sort', label: '排序', align: 'center' },
					{ prop: 'terminalType', label: '终端类型', align: 'center' },
					{ prop: 'permissionCode', label: '权限码', align: 'center' }
				]
			},
			tableData: [],
			openStatus: '0',
			openList: [{ name: '启用', value: 1 }, { name: '禁用', value: 2 }],
			terminalType: '',
			typeList: [{ name: 'pc' }, { name: 'mobile' }]

		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		toAdd() {
			this.dialogVisibleAdd = true
		},
		handDel(item) {
			this.$confirm('确定要删除这个系统吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$store.dispatch('conectPage/DelAggregateMenus', item).then(
					res => {
						this.$message.success('删除成功')
						if (this.tableData.length == 1 && this.page.currentPage > 1) {
							this.page.currentPage--
						}
						this.getList()
					}
				)
			})
		},
		handEdit(item) {
			this.dialogVisibleEdit = true
			delete item.creationTime
			this.$store.state.conectPage.terminal = item
		},
		// 关闭弹窗
		closeDialog(params) {
			if (params == 'add') {
				this.dialogVisibleAdd = false
			}
			if (params == 'edit') {
				this.dialogVisibleEdit = false
			}
		},
		// 确认
		confirmDialog(params) {
			if (params == 'add') {
				this.dialogVisibleAdd = false
				this.page.currentPage = 1
				this.getList()
			}
			if (params == 'edit') {
				this.dialogVisibleEdit = false
				this.getList()
			}
		},
		// 改变pagesize
		handleSizeChange(val) {
			this.page.currentPage = 1
			this.page.pageSize = val
			this.getList()
		},
		// 改变页码
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.getList()
		},
		getList() {
			var params = {
				name: this.name,
				pageIndex: this.page.currentPage,
				pageSize: this.page.pageSize,
				isActive: this.openStatus,
				terminalType: this.terminalType
			}
			this.$store.dispatch('conectPage/AggregateMenusList', params).then(
				res => {
					this.page.total = res.totalCount
					this.tableData = res.items
				}
			)
		},
		searchSystm() {
			this.page.currentPage = 1
			this.getList()
		}
	}
}
</script>
<style scoped>
.img {
	max-width: 100%;
	max-height: 100px;
}
</style>
